﻿<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=uPBWN5j3HdwY5wofjzWP2eY58PgXAazl"></script>
    <style>
        html, body, #container {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0
        }
    </style>

</head>
<body>
    <div id="container"></div>
    <script>

        //1.创建地图实例
        var map = new BMapGL.Map("container");
        //2.设置中心经纬度  这里我们使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中120.872845表示经度，32.021089表示纬度。（为南通濠河风景区坐标）
        var point = new BMapGL.Point(120.872845, 32.021089);
        //3.在创建地图实例后，我们需要对其进行初始化，BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作 值一般是3-19
        map.centerAndZoom(point, 15); // 3:中国  19：街道级别 一般是15


        map.enableScrollWheelZoom(true); //开启鼠标滚轮 地图可以进行放大 缩小
        map.addControl(new BMapGL.ScaleControl()); // 添加比例尺控件 左下角显示
        map.addControl(new BMapGL.ZoomControl());// 添加缩放控件 右下角显示
        map.addControl(new BMapGL.CityListControl());  // 添加城市列表控件 左上角
        map.addControl(new BMapGL.MapTypeControl());// 地图类型 右上角显示

        /*
        //向地图添加了一个文本标注，并使用默认的标注样式：
        var content = "hello world";
        var label = new BMapGL.Label(content, {       // 创建文本标注
            position: point,                          // 设置标注的地理位置
            offset: new BMapGL.Size(10, 20)           // 设置标注的偏移量
        })
        map.addOverlay(label);                        // 将标注添加到地图中
        */
        //地图添加大号 文本标注
        var content = 'hello world';
        var label = new BMapGL.Label(content, {       // 创建文本标注
            position: point,
            offset: new BMapGL.Size(10, 20)
        })
        map.addOverlay(label);                        // 将标注添加到地图中
        label.setStyle({                              // 设置label的样式
            color: '#000',
            fontSize: '50px',
            border: '2px solid blue'
        })
        //监听标注事件
        label.addEventListener("click", function () {
            alert("您点击了文本标注");
        });




    </script>

</body>
</html>
